<template>
      <div class="header">
        <div class="header2">文件导入</div>
    </div><br/>
  <el-upload
    class="upload-demo"
    drag
    :accept=" '.doc,.docx' "
    :before-upload="handleBeforeUpload"
    multiple
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
    <template #tip>
      <div class="el-upload__tip">
        仅支持word文档导入
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
import { interceptor } from '@/utils/interceptor'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
  console.log("file:",file)
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}

const uploadFile = (file: File)=>{
  const formData = new FormData();
  formData.append('file',file);

  const httpInstance = interceptor()
  httpInstance.post('http://localhost:8080/upload',formData)
  .then((res)=>{
   if(res.data.code == 1){
    alert("导入成功！")
   }
    //console.log("filePath:",res.data.code)
  })
  .catch((error)=>{
    console.error("文件上传失败：",error)
  })
}

const handleBeforeUpload = (file:File)=>{
  uploadFile(file);
  return false;
}
</script>

<style scoped>
 .header {
    display: flex;
    align-items: center;
    padding: 5px;
    border-left: 2px solid #409EFF;
  }

  .header2 {
    margin-left: 5px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .upload-demo{
    height:20%;
    width:60%;
    margin-left:20%;
    margin-top:10%;
  }


</style>